<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	    <meta content="telephone=no" name="format-detection" />
		<title>亲友圈管理</title>
		<link href="{{asset('/mobile/css/style.css')}}" rel="stylesheet" type="text/css">
	</head>
	<style type="text/css">
		body{
			background-color: #F1F1F1;
		}
		input{
			border: none;
			outline: none;
		}
		.tag{
			background-color: #FFFFFF;
			width: 100%;
			overflow: hidden;
			padding: 10px 0;
			display: flex;
		}
		.tag-left{
			flex: 0 0 40%;
			position: relative;
		}
		.center{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			-webkit-transform: translate(-50%, -50%);
			text-align: center;
		}
		.portrait{
			width: 5rem;
			height: 5rem;
			border-radius: 50%;
			margin-bottom: 5px;
		}
		.detail{
			flex: 0 0 60%;
		}
		.detail-li{
			margin: 10px 0;
		}
		.title{
			display: inline-block;
			width: 5rem;
			text-align: justify;
			height: 1rem;
			line-height: 1rem;
			overflow: hidden;
			vertical-align: middle;
		}
		.title:after{
			content: '';
			width: 100%;
			display: inline-block;
		}
		.value{
			display: inline-block;
			vertical-align: middle;
		}
		.red{
			color: #D42400;
		}
		.name{
			
		}
		.mao{
			margin-right: 5px;
		}
		.option{
			width: 100%;
			background-color: white;
		}
		.option-wrap{
			width: 90%;
			margin: 0 auto;
			text-align: justify;
		}
		.option-wrap:after{
			content:'';
		    width: 100%;
		    display: inline-block;
		    overflow: hidden;
		    height: 0;
		}
		.option-wrap img{
			width: 46%;
		}
		.qyq-con{
			background-color: white;
			padding-top: 5px;
			margin-top: 8px;
		}
		.qyq-title{
			margin: 10px 20px;
		}
		.qyq-title span{
			display: inline-block;
			vertical-align: middle;
		}
		.redline{
			background-color: #D63F15;
			width: 4px;
			height: 1rem;
			display: inline-block;
			vertical-align: middle;
		}
		.btn-list{
			text-align: center;
		}
		.btn-list div{
			position: relative;
		}
		.btn-list img{
			width: 80%;
			margin-bottom: 5px;
		}
		.mask{
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.5);
		}
		.sure-wrap{
			width: 80%;
			background-color: white;
			padding: 20px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			-webkit-transform: translate(-50%,-50%);
		}
		.btn_wrap{
			display: flex;
		}
		.btn_1{
			flex: auto;
			border: 1px solid #EEEEEE;
			border-radius: 5px;
			background-color: white;
			color: black;
			padding: 15px 20px;
			box-sizing: border-box;
			margin-top: 30px;
			text-align: center;
			display: inline-block;
		}
		.btn_margin{
			margin-right: 6%;
		}
		.btn_1.active{
			background-color: #D9543B;
			color: white;
		}
		.btn_2{
			background-color: #D9543B;
			color: white;
			padding: 10px;
			text-align: center;
			margin-top: 34px;
			border-radius: 5px;
		}
		.sure-tips{
			margin-top: 15px;
			color: #999999;
			font-size: 16px;
			line-height: 24px;
		}
		.dangqian{
			width: 40px !important;
		    position: absolute;
		    top: 50%;
		    left: 5px;
		    transform: translateY(-50%);
		    -webkit-transform: translateY(-50%);
		}
	</style>
	<body>
		<div class="tag">
			<div class="tag-left">
				<div class="center">
					<img class="portrait" src="{{$agent->avatar}}"/>
					<view class="name">{{$agent->realname}}</view>
				</div>
			</div>
			<div class="detail">
				<div class="detail-li">
					<div class="title">亲友圈名称</div><span class="mao">:</span>
					<div class="value red">{{base64_decode($club->club_name)}}</div>
				</div>
				<div class="detail-li">
					<div class="title">亲友圈ID</div><span class="mao">:</span>
					<div class="value red">{{$club->club_id}}</div>
				</div>
				<div class="detail-li">
					<div class="title">人数上限</div><span class="mao">:</span>
					<div class="value red">{{$club->limitpeople}}</div>
				</div>
				<div class="detail-li">
					<div class="title">桌数上限</div><span class="mao">:</span>
					<div class="value red">{{$club->maxrooms}}</div>
				</div>
				<div class="detail-li">
					<div class="title">当前人数</div><span class="mao">:</span>
					<div class="value red">{{$club->memberCount()}}</div>
				</div>
				<div class="detail-li">
					<div class="title">到期时间</div><span class="mao">:</span>
					<div class="value red"><span style="font-size:15px">{!! str_limit(date('Y-m-d H:i:s', ($club->expiry_date/1000)), 16, '') !!}</span></div>
				</div>

			</div>
		</div>
		<div class="option">
			<div class="option-wrap">
				<img id="rygl" src="{{asset('/imgs/rygl.png')}}" onclick="funRygl()"/>
				<img id="yqwj" src="{{asset('/imgs/yqwj.png')}}" onclick="funYqwj()"/>
			</div>
		</div>
		<div class="qyq-con">
			<div class="qyq-title">
				<i class="redline"></i>
				<span>亲友圈套餐</span>
			</div>
			<div class="btn-list">
				<div id="chu">
					@if($club->type == 2)<img class="dangqian" src="{{asset('/imgs/dangqian.png')}}"/>@endif
					@if($club->type == 2)<img src="{{asset('/imgs/pay_chu_now.png')}}"/>@else<img src="{{asset('/imgs/pay_chu.png')}}"/>@endif
				</div>
				<div id="zhong">
					@if($club->type == 3)<img class="dangqian" src="{{asset('/imgs/dangqian.png')}}"/>@endif
					@if($club->type == 3)<img src="{{asset('/imgs/pay_zhong_now.png')}}"/>@else<img src="{{asset('/imgs/pay_zhong.png')}}"/>@endif
				</div>
				<div id="gao">
					@if($club->type == 4)<img class="dangqian" src="{{asset('/imgs/dangqian.png')}}"/>@endif
					@if($club->type == 4)<img src="{{asset('/imgs/pay_gao_now.png')}}"/>@else<img src="{{asset('/imgs/pay_gao.png')}}"/>@endif
				</div>
				<div id="zun">
					@if($club->type == 5)<img class="dangqian" src="{{asset('/imgs/dangqian.png')}}"/>@endif
					@if($club->type == 5)<img src="{{asset('/imgs/pay_zun_now.png')}}"/>@else<img src="{{asset('/imgs/pay_zun.png')}}"/>@endif
				</div>
				<div id="chao">
					@if($club->type == 6)<img class="dangqian" src="{{asset('/imgs/dangqian.png')}}"/>@endif
					@if($club->type == 6)<img src="{{asset('/imgs/pay_chao_now.png')}}"/>@else<img src="{{asset('/imgs/pay_chao.png')}}"/>@endif
				</div>
			</div>
		</div>
	<script type="text/javascript" src="{{asset('/mobile/js/jquery-1.8.3.min.js')}}"></script>
	<script src="{{asset('/js/layer_mobile/layer.js')}}" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(document).on('click', 'img', e => {
			e.preventDefault(); 
		});
		var club_number = "{{$club->limitpeople}}",
			divide_date = "{{$divide_date}}",
			divide_money = "{{$divide_money}}";

		function funRygl() {
			var timestamp = Date.parse(new Date()),
				expiry_date = '{{$club->expiry_date}}';
			if (timestamp >= expiry_date) {
				layer.open({
					content: '您的会员已经到期了，请先续费会员！',
					btn: ['确定', '取消'],
					no: function(index) {
				      	layer.close(index);return;
					},
				    yes: function(index){
				      	layer.close(index);return;
				    }
				});
			} else {
				window.location.href='/mobile/agent/friend_circle/{{$agent->id}}';
			}
		}

		function funYqwj() {
			var timestamp = Date.parse(new Date()),
				expiry_date = '{{$club->expiry_date}}';
			if (timestamp >= expiry_date) {
				layer.open({
					content: '您的会员已经到期了，请先续费会员！',
					btn: ['确定', '取消'],
					no: function(index) {
				      	layer.close(index);return;
					},
				    yes: function(index){
				      	layer.close(index);return;
				    }
				});
			} else {
				window.location.href='/mobile/agent/friend_circle/invite/{{$agent->id}}';
			}
		}

		jQuery(function() {
			$('#chu').click(function() {
				if (club_number > 30) {
					layer.open({
						content: '您只能选择与当前套餐同等级或更高等级的套餐！',
						btn: ['确定', '取消'],
						no: function(index) {
					      	layer.close(index)
					      	return;
						},
					    yes: function(index){
					      	layer.close(index)
					      	return;
					    }
					});
				} else {
					layer.open({
						content: '您的会员将在'+divide_date+'天后到期，当前剩余天数可折算'+divide_money+'元！',
						btn: ['确定', '取消'],
						no: function(index) {
					      	layer.close(index)
						},
					    yes: function(index){
					      	layer.close(index)
					      	window.location.href = 'http://user.leyougame.cc/mobile/agent/payment/?cid={{$club->club_id}}&level=2';
					    }
					});					
				}
			})
			$('#zhong').click(function() {
				console.log(club_number);
				if (club_number > 60) {
					layer.open({
						content: '您只能选择与当前套餐同等级或更高等级的套餐！',
						btn: ['确定', '取消'],
						no: function(index) {
					      	layer.close(index)
					      	return;
						},
						yes: function(index){
					      	layer.close(index)
					      	return;
					    }
					});
				} else {
					layer.open({
						content: '您的会员将在'+divide_date+'天后到期，当前剩余天数可折算'+divide_money+'元！',
						btn: ['确定', '取消'],
						no: function(index) {
					      	layer.close(index)
						},
					    yes: function(index){
					      	layer.close(index)
					      	window.location.href = 'http://user.leyougame.cc/mobile/agent/payment/?cid={{$club->club_id}}&level=3';
					    }
					});					
				}
			})
			$('#gao').click(function() {
				console.log(club_number);
				if (club_number > 90) {
					layer.open({
						content: '您只能选择与当前套餐同等级或更高等级的套餐！',
						btn: ['确定', '取消'],
						no: function(index) {
					      	layer.close(index)
					      	return;
						},
						yes: function(index){
					      	layer.close(index)
					      	return;
					    }
					});
				} else {
					layer.open({
						content: '您的会员将在'+divide_date+'天后到期，当前剩余天数可折算'+divide_money+'元！',
						btn: ['确定', '取消'],
						no: function(index) {
					      	layer.close(index)
						},
					    yes: function(index){
					      	layer.close(index)
					      	window.location.href = 'http://user.leyougame.cc/mobile/agent/payment/?cid={{$club->club_id}}&level=4';
					    }
					});					
				}
			})
			$('#zun').click(function() {
				if (club_number > 120) {
					layer.open({
						content: '您只能选择与当前套餐同等级或更高等级的套餐！',
						btn: ['确定', '取消'],
						no: function(index) {
					      	layer.close(index)
					      	return;
						},
						yes: function(index){
					      	layer.close(index)
					      	return;
					    }
					});
				} else {
					layer.open({
						content: '您的会员将在'+divide_date+'天后到期，当前剩余天数可折算'+divide_money+'元！',
						btn: ['确定', '取消'],
						no: function(index) {
					      	layer.close(index)
						},
					    yes: function(index){
					      	layer.close(index)
					      	window.location.href = 'http://user.leyougame.cc/mobile/agent/payment/?cid={{$club->club_id}}&level=5';
					    }
					});					
				}
			})
			$('#chao').click(function(){
				layer.open({
					content: '您的会员将在'+divide_date+'天后到期，当前剩余天数可折算'+divide_money+'元！',
					btn: ['确定', '取消'],
					no: function(index) {
				      	layer.close(index)
					},
				    yes: function(index){
				      	layer.close(index)
				      	window.location.href = 'http://user.leyougame.cc/mobile/agent/payment/?cid={{$club->club_id}}&level=6';
				    }
				});				
			});
		})
		
	</script>
	</body>
</html>
